import React from 'react';
import { Modal, Form, Table, Button, Divider } from 'antd';
import fields from './fields';
import AddModalItem from './AddModalItem';

// const FormItem = Form.Item;

class AddModal extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      visItem: false,
      record: {}
    };
    this.onOK = this.onOK.bind(this);
    this.opt = this.opt.bind(this);
    this.settingHandler = this.settingHandler.bind(this);
  }

  opt(del, params) {
    const { record, getItemList } = this.props;
    Modal.confirm({
      title: '你确定要执行此操作？',
      cancelText: '取消',
      okText: '确定',
      onOk() {
        del(params).then(() => {
          getItemList({ dataTemplateId: record.id });
        });
      }
    });
  }

  componentDidMount(){
    const { getItemList, record } = this.props;
    getItemList({ dataTemplateId: record.id });
  }

  // 扩展字段
  extraFields() {
    const { delItem } = this.props;
    const settingHandler = this.settingHandler;
    const opt = this.opt;
    const extra = [
      {
        title: '操作',
        key: 'action',
        render: (text, record) => (
          <span>
            <a href="javascript:;" onClick={() => settingHandler('visItem', true, record)}>修改</a>
            <Divider type="vertical" />
            <a href="javascript:;" onClick={() => opt(delItem, { id: record.id })}>删除</a>
          </span>
        )
      }
    ];
    return fields.concat(extra);
  }
  settingHandler(type, value, record = {}) {
    this.setState({
      record,
      [type]: value
    });
  }

  onOK () {
    const { onOK, form, onCancel, record, getItemList } = this.props;
    console.log(record);
    form.validateFields((err, values) => {
      if (!err) {
        onOK({ ...values, id: record.id }).then(() => {
          onCancel();
          getItemList();
        });
      }
    });
  }

  render () {
    const { 
      onCancel, 
      // form,
      loading,
      addItem,
      editItem,
      itemlist,
      record: row,
      getItemList,
      dataTemplateId
      // record = {}
   } = this.props;
   const { visItem, record } = this.state;
   
    // const { getFieldDecorator } = form;
    const modalOpts = {
      confirmLoading: loading.additem,
      title: '模版字段管理',
      width: 700,
      visible: true,
      maskClosable: false,
      footer: null,
      // okText: '确定',
      // cancelText: '取消',
      onCancel
    };
    // const formItemLayout = {
    //   labelCol: {
    //     span: 6
    //   },
    //   wrapperCol: {
    //     span: 18
    //   }
    // };
    const tableProps = {
      loading: loading.itemlist,
      rowKey: (record, index) => index,
      dataSource: itemlist,
      columns: this.extraFields()
    };
    const addProps = {
      row,
      record,
      loading: loading.additem,
      dataTemplateId,
      getItemList,
      onOK: record.id ? editItem : addItem,
      onCancel: () => this.setState({ visItem: false })
    };

    return (
      <Modal {...modalOpts}>
        <div>
          <Button 
            type="primary" 
            onClick={() => this.settingHandler('visItem', true)}
            >新增</Button>
        </div>
        <Table {...tableProps} style={{marginTop: 20}} />
        { visItem && <AddModalItem {...addProps} /> }
      </Modal>
    );
  }
}

export default Form.create()(AddModal);
